<script type="text/javascript" src="<?=base_url()?>/js/jquery.dataTables.min.js"></script>
<div class="forms-wrapper ui-widget-content ui-corner-all">
	<h3 class="widget-header ui-widget-header ui-corner-all">Training Forms</h3>
	<div class="widget-content ui-helper-clearfix">
		<table class="training-forms ui-widget-content">
			<thead>
				<th>No</th>
				<th>Form</th>
				<th>Description</th>
				<th>Download</th>
			</thead>
			<tfoot>
				<th>No</th>
				<th>Form</th>
				<th>Description</th>
				<th>Download</th>
			</tfoot>
			<tbody>
				<tr>
					<td class="center">1</td>
					<td>Evaluation Form</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">2</td>
					<td>Form 1</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">3</td>
					<td>Form 2</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">4</td>
					<td>Form 3</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">1</td>
					<td>Evaluation Form</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">2</td>
					<td>Form 5</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">3</td>
					<td>Form 6</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
				<tr>
					<td class="center">4</td>
					<td>Form 7</td>
					<td>For Something...</td>
					<td class="center"><button class="download"></button></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript">
	$('.training-forms').dataTable({
		"bLengthChange": false,
        "sScrollY": "470",
        "bJQueryUI": true,
        "iDisplayLength": "100",
        "sPaginationType": "full_numbers",
        "sDom": '<"toolbar">frtip',
        "bInfo": false,
        "aoColumns":[
        	{"sWidth" : "5%"},
        	{"sWidth" : "25%"},
        	{"sWidth" : "60%"},
        	{"sWidth" : "10%", "bSortable": false}
        ]
    });

	$(".training-forms tbody tr").each(function(){
    	$(this).mouseover(function(){
    		$(this).addClass("ui-state-active");
    	}).mouseout(function(){
    		$(this).removeClass("ui-state-active");
    	});
    });

	$(".material-title").appendTo(".fg-toolbar:first");

	$(".material-download").button();

    $(".download").button({
		icons:{
			primary: "ui-icon-arrowthickstop-1-s"
		},
		text: false
    }).removeClass("ui-widget");
</script>